<!--这是添加管理员组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
				<span>添加管理员</span>
				<p>
					<!-- <em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em style="cursor: pointer;" @click="closeAdd"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="padding: 0 20px;">
				<div style="border-top: 1px solid #eee;padding-top: 10px;">
					<el-input @keyup.enter.native="searchUser" v-model="listQuery.userName" clearable placeholder="请输入用户昵称或 手机号" style="width: 200px;"></el-input>
					<el-button type="success" icon="el-icon-search" @click="searchUser">搜索</el-button>
          <!-- <el-radio-group v-model="radio"> -->
            <!-- <p class="userList" v-for="user in users">
  						<el-radio style="float: left;width: 80px;line-height: 32px;margin-right: 10px;"></el-radio>
  						<span><img :src="user.img" /></span><b>{{user.name}}</b>
  					</p> -->
            <div>&nbsp;</div>
					<el-radio v-for="user in users" :label="user.userId" v-model="radio" :key="user.userId" class="userRadio">
            <img class="headImg" :src="user.avatar" />
            <b>{{user.userName}}（ID：{{user.userId}}）</b>
          </el-radio>


          <!-- </el-radio-group> -->
				</div>
				<p v-if="permission == 3" style="text-align: center;line-height: 80px;">
					<el-button type="primary" icon="el-icon-check" @click="saveManager">保存</el-button>
					<el-button type="info" @click="closeAdd">取消</el-button>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import { getManager } from '@/api/social'
import { interaction_social } from '@/utils/permission'
export default {
  components: {
  },
  data() {
    return {
      permission: 3,
      radio: null,
      listQuery: {
        userName: null
      },
      users: [],
      manager: {
        userId: null,
        userName: null,
        avatar: null,
        mobile: null,
        jgUser: null
      }
    }
  },
  mounted() {
    this.getModelPermission()
  },
  methods: {
    getModelPermission() {
      this.permission = interaction_social()
    },
    saveManager() {
      if (this.radio == null) {
        this.$message({
          type: 'info',
          message: '请选择一个用户在点击保存！'
        })
        return
      }
      for (var i in this.users) {
        if (this.users[i].userId == this.radio) {
          console.log(this.users[i])
          console.log(this.users[i].userId)
          console.log(this.users[i].userName)
          console.log(this.users[i].avatar)
          this.manager.userId = this.users[i].userId
          this.manager.userName = this.users[i].userName
          this.manager.avatar = this.users[i].avatar
          this.manager.mobile = this.users[i].mobile
          if (this.users[i].jgUser) {
            this.manager.jgUser = this.users[i].jgUser
          }
          console.log(this.users[i].jgUser)
        }
      }
      console.log(this.manager)
      this.$emit('saveManager', this.manager)
      this.$emit('hideAddManager', false)
    },
    searchUser() {
      if (!this.listQuery.userName) {
        this.$message({
          type: 'error',
          message: '请输入用户的昵称或者手机号！'
        })
        return
      }
      getManager(this.listQuery).then(res => {
        console.log(res.data.data)
        if (res.data.data.length == 0) {
          this.$message({
            type: 'info',
            message: '没有该用户！'
          })
        }
        this.users = res.data.data
        console.log(this.users)
      }).catch(err => {
        console.log(err)
      })
    },
    closeAdd() {
      this.listQuery.userName = null
      this.users = []
      this.$emit('hideAddManager', false)
    }
  }
}
</script>
<style scoped>
p,h3{ margin: 0;}
	.addBox {
		/* width: 600px; */
		height: 500px;
		overflow: auto;
		background: #fff;
		position: fixed;
		left: 25%;
    right: 25%;
    bottom: 15%;
		top: 15%;
		z-index: 120;
	}
  .fixTitle{
    position: relative;
    width: 100%;
  }
  .userRadio{
    text-align:left;
    width:100%;
    margin:10px 0;
  }
  .headImg{
		width: 30px;
		height: 30px;
		vertical-align: middle;
    border-radius:100%;
	}
</style>
